<!DOCTYPE html>
<html>
<head>
    <title>日期计算器</title>
    <link rel="stylesheet" href="../static/css/minghu.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
</head>
<body>
    {% include 'show_ins_info.html' %}
    <h1>日期计算器</h1>
    <hr>  
    <div>
        <div id="dateBox" class="form-row"><h4 style="width:70px;">起始日期</h4><input id="dateInput" type="date" onchange="calEndDate();"></div>
        <div id="prdBox" class="form-row"><h4 style="width:70px;">课程天数</h4><input id='prd' type='number' min="1" step="1" pattern="\d+" style="width:30px;" oninput="calEndDate();"></div>
        <hr>
        <div id="endDate"  ></div>
    </div>  

    <script src="../static/js/common.js"></script>
    <script>     
        document.addEventListener("DOMContentLoaded",function(){
            // loginCheck();
            const insInfo=hideInsSelectBlockAndGetInsInfo();
            insName=insInfo['sessionInsName'];
            insId=insInfo['sessionInsId'];
            insRole=insInfo['sessionInsRole'];

            selectToday('dateInput','date');
            document.getElementById('prd').value=30;
            calEndDate();



        });


        function calEndDate(){
            const startDate=new Date(document.getElementById('dateInput').value);
            const prd=parseInt(document.getElementById('prd').value);
            const endDateBox=document.getElementById('endDate');

            if(prd && prd!==''){
                if(prd>=1){
                    const endDate=new Date(startDate.getTime() + prd * 24 * 60 * 60 * 1000)
                    endDate.setHours(0,0,0,0);
                    endDate.setDate(endDate.getDate()-1)
                    // console.log(endDate)                    
                    endDateBox.innerHTML=`<h4 style='margin:5px;'>结束日（包含该日期）：</h4><div style='margin-left:4px; color:#e85d2e;font-size:20px;'>${dateToString(endDate,'date')}</div>`;
                }else{
                    document.getElementById('prd').value=1;
                    endDateBox.innerHTML=`<div style='margin-left:4px; color:#e85d2e;font-size:20px;'>课程天数必须大于0天</div>`;
                }
                
            }else{
                endDateBox.innerHTML='';
            }
            
            
        }



        
        
       
    </script>
</body>